<template>
  <div class="w-full h-full overflow-scroll border-t border-gray-200 pt-[20px]">
    <span class="text-[14px] font-medium mb-[16px] inline-block">banner设置</span>
    <el-form class="w-full">
      <el-form-item class="w-full" label=" " :label-width="0">
        <div class="w-full flex justify-between">
          <div class="flex-none w-[60px]"><span class="text-[#595959]">背景图</span></div>
          <div class="flex-auto">
            <!-- 图片上传 -->
            <ImageListUpload :stemImages="model.bannerUrl ? [{ id: 'bannerUrl', path: model.bannerUrl }] : []"
              actionImgStyle="width: 250px;height: 112px;" :imgNumber="1" :limit-size-img="5"
              @update:stemImages="(v) => { model.bannerUrl = v[0]?.path || '' }" />
            <div class="text-[#AEAEAE] text-[12px] font-normal leading-[20px]">支持png、jpeg、jpg格式图片，</div>
            <div class="text-[#AEAEAE] text-[12px] font-normal leading-[20px]">
              宽高比为64:29，大小不超过 5 M。
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item :label="$t('competition.modules.banner.showButton')">
        <el-switch v-model="model.button.show" :disabled="bannerImageList.length === 0" inline-prompt
          :active-icon="Check" :inactive-icon="X" />
      </el-form-item>
      <template v-if="model.button.show">
        <el-form-item :label="$t('competition.modules.banner.buttonColor')">
          <el-color-picker :style="`background-color: ${model.button.color || '#000000'};`"
            v-model="model.button.color" />
        </el-form-item>
        <el-form-item :label="$t('competition.modules.banner.buttonPosition')">
          <div class="w-full space-y-3">
            <!-- 像素坐标输入 -->
            <div class="flex items-center justify-between">
              <span class="text-xs">X</span>
              <el-input-number class="w-[100px]" :min="0" :max="2000" :precision="0" :controls="false"
                v-model="model.button.x" :placeholder="$t('competition.modules.banner.xCoordinate')" />
              <span class="text-xs ml-4">Y</span>
              <el-input-number class="w-[100px]" :min="0" :max="2000" :precision="0" :controls="false"
                v-model="model.button.y" :placeholder="$t('competition.modules.banner.yCoordinate')" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span class="mr-2 text-red-500 absolute left-[15px]">*</span>
            {{ $t('competition.modules.banner.buttonText') }}
          </template>
          <el-input v-model="model.button.text" maxlength="20" :placeholder="$t('common.inputPhTxt')" />
        </el-form-item>
        <el-form-item :label="$t('competition.modules.banner.textSettings')">
          <SetTextFormat v-model:modelValue="model.button.textStyle" />
        </el-form-item>
        <el-form-item :label="$t('competition.modules.banner.jumpLink')">
          <el-input v-model="model.button.link" :placeholder="$t('common.inputPhTxt')" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { $t } from '#/locales'
import SetTextFormat from '#/components/setTextFormat.vue'
import ImageListUpload from "#/components/common/image-list-upload.vue"
import { Check, X } from '@vben/icons'

// 文本格式配置接口
interface TextFormatConfig {
  fontSize: number;
  fontColor: string;
  fontBold: boolean;
  italic: boolean;
  underline: boolean;
  alignCenter: string;
  textWidth: number;
  textHeight: number;
}

// Banner表单数据接口
interface BannerForm {
  show: boolean;
  bannerUrl: string;
  button: {
    show: boolean;
    text: string;
    color: string;
    x: number;  // 基于原始图片尺寸的像素坐标
    y: number;  // 基于原始图片尺寸的像素坐标
    link: string;
    textStyle: TextFormatConfig;
  };
}


const model = defineModel<BannerForm>({ required: true })

// 图片列表计算属性
const bannerImageList = computed(() => {
  return model.value.bannerUrl ? [{ id: 'bannerUrl', path: model.value.bannerUrl }] : []
})
</script>
